<!--用户管理  新建用户 类=> 型 删除做个提示框-->
<template>
  <el-container class="page">
    <el-row
      class="page-search"
      v-if="$getAuth('user:list')"
      title="点击右边按钮，展开搜索条件查询器"
    >
      <el-col :span="21" style="min-height:1px;">
        <ul class="search-list">
          <li v-for="item in searchTerm" :key="item.key" class="search-item">
            <label class="search-label">{{ item.label }}:</label>
            <el-input
              v-model="item.value"
              :label="item.label"
              size="small"
              placeholder="请输入查询条件"
              @keyup.native.enter="onSubmitSearchUser"
            >
            </el-input>
          </li>
        </ul>
      </el-col>
      <el-col :span="2" class="search-btns" style="min-height:1px;">
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-search"
          @click="onSubmitSearchUser"
          >查询</el-button
        >
        <el-button
          size="mini"
          icon="el-icon-delete"
          style="margin:10px 0 0 ;"
          @click="onCanleSearch"
          >清空</el-button
        >
      </el-col>
    </el-row>
    <el-row class="page-fun">
      <el-col>
        <el-button
          v-if="$getAuth('user:addUser')"
          type="primary"
          size="small"
          icon="el-icon-plus"
          @click="onCreateUserDialog"
          >添加用户</el-button
        >
      </el-col>
    </el-row>
    <main class="page-main" v-loading="loading">
      <el-table
        border
        :data="tableData"
        :row-style="setTableRowStyle"
        @row-click="onHandleViewUser"
      >
        <el-table-column
          prop="index"
          type="index"
          label="序号"
          width="100"
          fixed
        ></el-table-column>
        <el-table-column prop="realName" label="用户姓名" width="160">
          <template slot-scope="scope">
            {{ scope.row.realName }}
          </template>
        </el-table-column>
        <el-table-column label="用户名" prop="username" width="160">
          <template slot-scope="scope">
            {{ scope.row.username }}
          </template>
        </el-table-column>
        <el-table-column prop="telPhone" label="电话" width="220">
          <template slot-scope="scope">
            {{ scope.row.telPhone }}
          </template>
        </el-table-column>
        <el-table-column label="地址" prop="address">
          <template slot-scope="scope">
            {{ scope.row.address }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150px">
          <template slot-scope="scope">
            <div class="btn-opers">
              <el-link
                :underline="false"
                v-if="$getAuth('user:updateUser')"
                @click.stop="onHandleEditUser(scope.row.id)"
                >编辑</el-link
              >
              <el-link
                :underline="false"
                v-if="$getAuth('user:deleteUser')"
                :type="scope.row.delFlag ? 'primary' : 'danger'"
                @click.stop="
                  onHandleDeleteUser(scope.row.id, scope.row.delFlag)
                "
                >{{ scope.row.delFlag ? '启用' : '禁用' }}</el-link
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pager">
        <el-pagination
          background
          @size-change="onHandleSizeChange"
          @current-change="onHandleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total,sizes,prev,pager,next,jumper"
          :total="tableDataTotal"
        ></el-pagination>
      </div>
    </main>
    <td-layer
      top="10vh"
      width="850px"
      :title="
        dialogTitleNum > 0
          ? '编辑用户'
          : dialogTitleNum < 0
          ? '查看'
          : '新建用户'
      "
      :close-on-click-modal="false"
      :visible.sync="dialogBoolean"
      :before-close="onCloseUserDialog"
    >
      <form-user
        :submitText="dialogTitleNum"
        :userId="userId"
        @onSubmit="formUserSubmit"
      ></form-user>
    </td-layer>
  </el-container>
</template>
<script>
import { userManage, roleManage, uploadFile } from '@/api'
import formUser from './formUser.vue'

import { debounce } from '@/utils/utils'

var baseUrl = process.env.VUE_APP_BASE_API
const newUserForm = {
  icon: '',
  realName: '',
  username: '',
  roleId: '',
  telPhone: '',
  email: '',
  address: ''
}
export default {
  name: 'user_manage',
  componentName: 'UserManage',
  components: { formUser },
  data() {
    return {
      loading: false,
      dialogBoolean: false,
      dialogTitleNum: 0, // 0 新建 -1 查看 1 编辑
      userId: null,
      tableData: [], // table list 数组
      searchUserForm: { ...newUserForm }, // 搜索用户
      searchTerm: [
        {
          label: '姓名',
          key: 'realName',
          value: ''
        },
        {
          label: '用户名',
          key: 'username',
          value: ''
        },
        {
          label: '电话',
          key: 'telPhone',
          value: ''
        }
        // {
        //   label: '邮箱',
        //   key: 'email',
        //   value: ''
        // }
      ],
      // isSearch : false ,                  // 判断页面跳转是

      tableDataTotal: 400,
      currentPage: 1,
      pageSizes: [10, 20, 50],
      pageSize: 20
    }
  },
  created() {
    this.getUserList()
  },
  mounted() {},
  watch: {
    //
    searchTerm: {
      handler(newV, oldV) {
        console.log(newV)
        for (let i = 0; i < newV.length; i++) {
          this.searchUserForm[newV[i]['key']] = newV[i]['value']
        }
      },
      deep: true
    }
  },
  methods: {
    setTableRowStyle({ row, rowIndex }) {
      return { cursor: 'pointer' }
    },
    //  获取用户列表
    async getUserList() {
      this.loading = true
      try {
        const userRes = await userManage.getUserList({
          page: this.currentPage,
          pageSize: this.pageSize,
          param: this.searchUserForm
        })
        this.tableData = userRes.data.list
        this.tableDataTotal = userRes.data.total
        this.loading = false
      } catch {
        this.loading = false
        this.$message.error({
          message: '噢，发现错误，联系后台管理员',
          duration: 2000
        })
      }
    },
    // 创建新用户表单
    onCreateUserDialog() {
      this.dialogBoolean = true
      this.dialogTitleNum = 0
    },
    // 清空search
    onCanleSearch() {
      for (let i = 0; i < this.searchTerm.length; i++) {
        this.searchTerm[i]['value'] = ''
      }
      this.getUserList()
    },
    // 执行搜索
    onSubmitSearchUser: debounce(
      function() {
        this.currentPage = 1
        this.getUserList()
      },
      1000,
      true
    ),

    // 单页条数
    onHandleSizeChange(val) {
      this.pageSize = val
      this.getUserList()
    },
    // 翻页动作
    onHandleCurrentChange(val) {
      this.currentPage = val
      this.getUserList()
    },
    // 查看用户
    onHandleViewUser(row, column, event) {
      this.dialogTitleNum = -1
      this.dialogBoolean = true
      this.userId = row.id
    },
    // 编辑用户
    async onHandleEditUser(id) {
      this.dialogTitleNum = 1
      this.dialogBoolean = true
      this.userId = id
    },
    //
    formUserSubmit(bool) {
      if (bool) {
        this.getUserList()
      }
      this.onCloseUserDialog()
    },
    // 关闭dialog
    onCloseUserDialog() {
      this.dialogTitleNum = null
      this.dialogBoolean = false
      this.userId = null
    },
    // 修改用户状态
    onHandleDeleteUser(id, num) {
      console.log(id, num)
      this.$confirm(`您确定要${num ? '启用' : '禁用'}这个用户？`, '提示', {
        confirmButtonText: '',
        cancelButtonText: '',
        type: 'warning',
        center: true
      })
        .then(res => {
          userManage
            .deleteUser({ id, delFlag: num ? 0 : 1 })
            .then(res => {
              this.getUserList()
            })
            .catch(err => {
              console.log(err)
            })
        })
        .catch(err => {})
    }
  }
}
</script>
<style lang="scss" scoped>
$c-active: #ddd;
.page {
  height: 100%;
  flex-direction: column;
  .page-search {
    padding-bottom: 20px;
    margin-bottom: 12px;
    border-bottom: 1px solid $c-active;
    justify-content: center;
    align-items: center;

    .search-item {
      float: left;
      padding: 5px 10px;
      box-sizing: border-box;
      .search-label {
        width: 70px;
        text-align: right;
        margin-right: 15px;
        display: inline-block;
        font-size: 14px;
      }
      & /deep/ .el-input {
        width: 200px;
      }
    }
    .search-btns {
    }
  }
  .page-fun {
    height: 40px;
    margin: 0 20px 12px 0;
    padding-top: 7px;
    box-sizing: border-box;
  }
  main {
    .pager {
      text-align: center;
      margin: 60px 0;
    }
  }
  // .page 页面下el-dialog el-scrollbar

  .el-dialog {
    // horizontal
    .el-scrollbar-vertical {
      height: 50vh;
      & /deep/ .el-scrollbar__wrap {
        overflow-x: hidden;
      }
    }
  }

  .el-dialog {
    .user-face-upload {
      text-align: center;
      width: 72px;
      height: 72px;
      border: 1px dashed #d9d9d9;
      border-radius: 4px;
      cursor: pointer;
      overflow: hidden;
      position: relative;
      margin: 0 auto;
      &:hover {
        border-color: #41b883;
      }
      .face-plus {
        font-size: 24px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
      .userface {
        width: 72px;
        height: 72px;
      }
    }
  }
}
</style>
